<template>
  <div class="hello">
    <h1>This website base on <a target="_blank" href="https://cli.vuejs.org/zh/guide/creating-a-project.html">vue-cli</a></h1>
    <div class="color-palatte">
      <div>color from component: <span :style="`color:${color};`">{{color}}</span></div>
      <div>
        <input type="text" v-model="pColor"/>
        <button @click="$refs['color-palatte'].setColor(pColor)">setColor</button>
      </div>
      <!-- 调色板组件 
      组件提供两个传入参数:
      1. show: Boolean [可选][默认true]是否显示调色板，可以通过控制这个参数来控制组件的显示与否。
      2. defaultColor: String [可选][默认#FF0000]十六进制RGBA颜色，开头需要含有#
      -->
      <color-palatte ref="color-palatte" :show="true" defaultColor="#FFFF00" @color="color=$event"></color-palatte>
    </div>
  </div>
</template>

<script>
import ColorPalatte from './ColorPalatte.vue';

export default {
  name: 'HelloWorld',
  components: {ColorPalatte},
  data () {
    return {
      color: 'Not selected!',
      pColor: '#FF0000'
    };
  },
  mounted() {
    if (this.$refs['color-palatte']) {
      // 组件提供的方法：
      // 1. 获取当前的颜色RGBA值（十六进制）
      console.log(this.$refs['color-palatte'].getColor());
      // 2. 设置颜色
      // this.$refs['color-palatte'].setColor('#FF0000');
      // 3. 显示/隐藏
      // this.$refs['color-palatte'].open();
      // this.$refs['color-palatte'].close();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-weight: normal;
}
.color-palatte {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
